<template>
  <div class="head-wrap background_box" style="color: #fff" v-show="showHead">
    <div class="head-content">
      <div class="left">
        <img
          src="../assets/images/logo.png"
          class="logo_wrap"
          @click="goToPage('index')"
          alt=""
        />
      </div>
      <div class="right" v-show="showTitle">
        <div class="wallet_box">
          <div class="linkAddress">
            {{ splitAddress(store.state.address, 8) }}
          </div>
        </div>
        <div class="change_order">
          <i
            @click="showPopover2 = true"
            :style="{ color: store.state.theme == 'dark' ? '#fff' : '#000' }"
            class="iconfont icon-chakanxiangqinggengduo"
          ></i>
        </div>
      </div>
    </div>
    <van-popup
      v-model:show="showPopover2"
      position="right"
      :style="{ width: '45%', height: '100%' }"
    >
      <div class="meun_box">
        <div class="menu_item" v-for="item in routerArr"  :key="item.value" :class="{ menu_item_active: router.currentRoute.value.name == item.value }" @click="goToPage(item.value)" >
          <i :class="['iconfont', 'item_icon', item.icon]"></i>  {{ item.name }}
        </div>
        <div>
          <van-popover v-model:show="showPopover" placement="bottom-end">
            <div class="language_box">
              <div
                class="language_item"
                v-for="item in languageData"
                :key="item.value"
                :class="{ language_item_active: locale == item.value }"
                @click="changeLang(item.value)"
              >
                <van-image round fit="cover" :src="requireImg(item.img)" />
                {{ item.name }}
              </div>
            </div>
            <template #reference>
              <div class="language_item">
                <i
                  :style="{
                    color: store.state.theme == 'dark' ? '#fff' : '#000',
                  }"
                  class="item_icon iconfont icon-duoyuyan"
                ></i>
                {{ nowLanuage }}
              </div>
            </template>
          </van-popover>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script setup>
import { useStore } from "vuex";
import { ref, reactive, onMounted, computed } from "vue";
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();
import { useRouter } from "vue-router";
const router = useRouter();
const store = useStore();
const props = defineProps({
  messageSum: {
    type: [String, Number],
    default: 0,
  },
  url: {
    type: String,
    default: "",
  },
  shop: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
});
const languageData = [
  { name: "简体中文", img: "zh.svg", value: "zh" },
  { name: "English", img: "en.svg", value: "en" },
  { name: "Tiếng Việt", img: "vi.png", value: "vi" },
  { name: "Melayu", img: "ma.svg", value: "bm" },
  { name: "ພາສາລາວ", img: "lao.jpg", value: "lao" },
  { name: "Русский язык", img: "ru.png", value: "ru" },
  { name: "Español", img: "sp.png", value: "sp" },
  { name: "แบบไทย", img: "th.svg", value: "th" },
];
const routerArr = computed(()=>{
  return [
  { name: "首页", icon:'icon-shouye', value: "index" },
  { name: "我创建的圣经", icon:'icon-heikeji', value: "normalLock" },
  { name: "我收到的圣经", icon:'icon-ic_daifahuo1', value: "receiveLock" },
  { name: "我推荐的圣经", icon:'icon-ic_gift1', value: "recommendLock" },
  { name: "我接收转移的圣经", icon:'icon-ic_daishouhuo1', value: "receiveOwnerLock" },
  ]
})
const nowLanuage = computed(() => {
  let index = languageData.findIndex((res) => res.value == locale.value);
  return languageData[index > 0 ? index : 0].name;
});
const requireImg = (imgPath) => {
  return new URL(`../assets/images/${imgPath}`, import.meta.url).href;
};
const showPopover = ref(false);
const goToPage = (value) => {
  let query = {};
  let name = value;
  if (value == "shopOrder") {
    if (store.state.myShop.status == 1) {
    } else if (store.state.myShop.status == 3) {
      name = "applyShop";
    } else {
      return;
    }
    query = {
      self: 1,
    };
  }
  router.push({
    name: name,
    query,
  });
  showPopover2.value = false;
  showPopover.value = false;
};
const showHead = computed(() => {
  return ["index", "pandora", "group", "chakan"].includes(
    router.currentRoute.value.name
  );
});
const showTitle = computed(() => {
  return !["sellerDetail"].includes(router.currentRoute.value.name);
});
const showPopover2 = ref(false);

const isDark = ref(false);
isDark.value = localStorage.getItem("theme") == "dark" ? true : false;
document.documentElement.classList.add(
  `van-doc-theme-${isDark.value ? "dark" : "light"}`
);
document.documentElement.classList.add(
  `${isDark.value ? "dark" : "light"}_theme`
);
store.commit("addTheme", isDark.value ? "dark" : "light");
locale.value = window.localStorage.getItem("languageStatus") || "zh";
const changeLang = (value) => {
  locale.value = value;
  window.localStorage.setItem("languageStatus", value);
  showPopover.value = false;
};
const splitAddress = (address) => {
  if (address) {
    return (
      address.slice(0, 7) +
      "..." +
      address.slice(address.length - 4, address.length)
    );
  } else {
    return t("linkWallet");
  }
};
</script>
<style>
.van-popover__content {
  border: 1px solid #666 !important;
}
</style>
<style lang="scss" scoped>
.meun_box {
  padding: 20px 14px;
  .menu_item {
    border-radius: 5px;
    margin: 10px 0;
    background: #252f37;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .menu_item_active {
    background: $primary-color;
  }
}
.change_order {
  margin-left: 6px;
}
.item_icon {
  margin-right: 5px;
  font-size: 12px;
}
.head-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-bottom: 2px solid #f5f5f5;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  z-index: 3;
  .menu_set {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .head-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;

    .logo_wrap {
      display: inline-block;
      height: 22px;
    }

    .left {
      display: flex;
      align-items: center;
      min-width: 120px;

      .set_icon {
        font-size: 24px;
        color: #fff;
        margin-right: 5px;
        cursor: pointer;
      }
    }
    .main_title {
      font-size: 12px;
    }

    .right {
      align-items: center;
      height: 0.74667rem;
      font-size: 0.4rem;
      min-width: 100px;
      font-weight: 500;
      color: #1e3566;
      display: flex;
      align-items: center;
      .wallet_box {
        margin-right: 2px;
        color: #fff;
        background-color: $primary-color;
        overflow: hidden;
        font-size: 11px;
        padding: 0 6px;
        min-width: 64px;
        box-sizing: border-box;
        height: 20px;
        text-align: center;
        transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0ms,
          box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0ms,
          border 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
        font-weight: 500;
        line-height: 20px;
        border-radius: 14px;
        text-transform: none;
      }

      .light {
        color: #fff;
      }

      .dark {
        font-size: 16px;
      }
    }
  }
}

.themeChange {
  margin-right: 8px;
}

.linkAddress {
}

.language_box {
  padding: 0px 0px;
  min-width: 100px;
}

.menu_box {
  min-width: 148px;
  max-height: 75vh;
  overflow: auto;
  background-color: #222143;
  border-radius: 8px;
  padding: 8px;
  box-shadow: rgba(0, 0, 0, 0.25) 0 4px 12px;
  font-size: 14px;
  z-index: 100;
}
.menu_item {
  display: flex;
  padding: 8px;
  color: inherit;
  text-decoration: none;
  font-weight: 400;
}
.language_item {
  padding: 10px 15px;
  cursor: pointer;
  text-align: center;
  color: #222;
  display: flex;
  align-items: center;

  .van-image {
    height: 18px;
    width: 18px;
    margin-right: 8px;
  }
}

.language_item_active {
  color: #000;
  background: #f5f5f5;
}

.footer {
  height: 40px;
}

.tab_item {
  font-size: 12px;
  padding: 10px 15px;
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #666;
}

.tab_item_active {
  color: #000;
}

.language_item:hover {
  // background: #e5e5e5;
}

.imgfont {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  margin-left: 10px;
  color: #000;
  display: flex;
  cursor: pointer;
  align-items: center;

  img {
    width: 14px;
  }
}
</style>
